import {Component, Input, OnChanges, OnInit, SimpleChanges} from '@angular/core';

@Component({
  selector: 'app-regional-contain-power-item2',
  templateUrl: './regional-contain-power-item2.component.html',
  styleUrls: ['./regional-contain-power-item2.component.css']
})
export class RegionalContainPowerItem2Component implements OnInit,OnChanges {
  ngOnChanges(changes: SimpleChanges): void {
    if(this.data&&changes['data']){
      this.initChart()
    }
  }

  constructor() { }

  ngOnInit() {
    // this.initChart();
  }


  public chartOptions
  @Input() data:any
  @Input() itemName:any


  private initChart() {
    let itemName=this.itemName
    let initData=this.data;
    //console.log(initData);
    this.chartOptions = {
      chart: {
        height: 120,
        // plotBorderWidth: null,
        // plotShadow: false,
        type: 'column',
        backgroundColor: 'transparent',
        // renderTo: ''
      },
      legend: {
        enabled: false
      },
      credits: {
        enabled: false
      },
      exporting: {
        enabled: false
      },
      title: {
        text: ''
      },
      xAxis: {
        categories: itemName,
        labels:{
          enabled:false
        },
      },
      yAxis: [{
        endOnTick: true,
        title: {
          text: '发电量(万kwh)',
        },
        gridLineWidth: 0,
        // labels : {
        //   formatter : function() {   //设置纵坐标值的样式
        //     return this.value + 'kwh';
        //   }
        // }
      },{
        visible:false,
        endOnTick: true,
        title: {
          text: '',
        },
        opposite: true,
        gridLineWidth: 0,
      }],
      tooltip: {
        headerFormat: '<span style="font-size:10px">{point.key}</span><table>',
        pointFormat: '<tr><td ><span style="color:{series.color};padding:0">●</span>{series.name}: </td>' +
        '<td style="padding:0"><b>{point.y:.3f}万kwh</b></td></tr>',
        footerFormat: '</table>',
        shared: true,
        useHTML: true
      },
      plotOptions: {
        column: {
          grouping: false,
          shadow: false,
          pointPadding:0.1,
          borderWidth: 0
        },
      },
      series: initData
    }
  }

}
